<template>
  <div class="ui_address" style="padding-top:46px">
    <van-nav-bar title="上门服务地址簿" left-arrow @click-left="onClickLeft" fixed :zIndex="99"/>
    <van-list class="list" v-model="loading" :finished="finished" @load="onLoad">
      <div class="box" v-for="(item,index) in addressList" :key="index">
        <div class="box_top">
          <p class="p1">
            <span class="sp1">{{item.name}}</span>
            <span class="sp2">{{item.mobile}}</span>
          </p>
          <p class="p2">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</p>
        </div>
        <div class="box_bottom">
          <div class="checkbox">
            <van-checkbox v-model="item.isDefault" v-if="item.isDefault">默认地址</van-checkbox>
          </div>
          <div class="btn" @click="edit(item)"><i class="iconfont icon-bianji"></i> 编辑</div>
          <div class="btn" @click="del(item)"><i class="iconfont icon-lajitong"></i> 删除</div>
        </div>
      </div>
    </van-list>
    <div class="address_footer">
      <van-button class="btn" type="primary" bottom-action @click="add()">添加新地址</van-button>
    </div>
    <van-popup class="popup_box" v-model="popupShow" position="top" :overlay="false">
      <div class="address_popup" style="padding-top:46px">
        <van-nav-bar :title="isNewAdd?'新建地址':'修改地址'" left-arrow @click-left="popupShow=false" fixed :zIndex="9999"/>
        <van-cell-group>
          <van-field v-model="form.name" label="姓名" icon="clear" placeholder="请输入姓名" @click-icon="form.name = ''"/>
          <van-field v-model="form.mobile" label="联系电话" placeholder="请输入手机号" />
          <van-field v-model="form.province" label="详细地址" placeholder="请选择地址" disabled >
            <template slot="button">
              <i class="iconfont icon-dingwei"></i>
              <span>定位</span>
            </template>
          </van-field>
          <van-field v-model="form.housing" label="" placeholder="请选择小区" disabled />
          <van-field v-model="form.address" label="" placeholder="楼号-门牌号（选填）" />
          <van-cell title="设置默认地址">
            <van-checkbox v-model="form.checked"></van-checkbox>
          </van-cell>
        </van-cell-group>
        <div class="btn_box">
          <van-button class="btn" type="primary" size="large">保存</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          name: "崔永元",
          mobile: "18768123450",
          province: "浙江省",
          city: "杭州市",
          district: "拱墅区",
          address: "古荡街道文一西路萍水西街城西银泰城19楼1901室",
          isDefault: true
        },
        {
          name: "崔永元",
          mobile: "18768123450",
          province: "浙江省",
          city: "杭州市",
          district: "拱墅区",
          address: "古荡街道文一西路萍水西街城西银泰城19楼1901室"
        },
        {
          name: "崔永元",
          mobile: "18768123450",
          province: "浙江省",
          city: "杭州市",
          district: "拱墅区",
          address: "古荡街道文一西路萍水西街城西银泰城19楼1901室"
        },
        {
          name: "崔永元",
          mobile: "18768123450",
          province: "浙江省",
          city: "杭州市",
          district: "拱墅区",
          address: "古荡街道文一西路萍水西街城西银泰城19楼1901室"
        }
      ],
      loading: false,
      finished: false,
      popupShow: false,
      isNewAdd: true,
      form: {
        name: "",
        mobile: "",
        province: "",
        housing: "",
        address: "",
        checked: false
      }
    };
  },
  methods: {
    onClickLeft() {},
    onLoad() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.addressList.push({
            name: "崔永元",
            mobile: "18768123450",
            province: "浙江省",
            city: "杭州市",
            district: "拱墅区",
            address: "古荡街道文一西路萍水西街城西银泰城19楼1901室"
          });
        }
        this.loading = false;

        if (this.addressList.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    add() {
      this.isNewAdd = true;
      this.popupShow = true;
    },
    edit(e) {
      this.isNewAdd = true;
      this.form = e;
      this.popupShow = true;
    },
    del() {},
  }
};
</script>

<style lang="less">
.ui_address {
  padding: 10px 0 16px;
  .list {
    .box {
      margin-top: 20px;
      background-color: #fff;
      .box_top {
        padding: 30px 30px 10px;
        border-bottom: 1px solid #e1e1e1;
        p {
          margin: 0;
          color: #333;
          &.p1 {
            .sp1 {
              font-size: 32px;
            }
            .sp2 {
              float: right;
              font-size: 28px;
            }
          }
          &.p2 {
            font-size: 28px;
          }
        }
      }
      .box_bottom {
        display: flex;
        padding: 10px 30px;
        .checkbox {
          flex: 1;
          .van-checkbox__icon {
            font-size: 16px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-color: #f7a427;
            background-color: #f7a427;
          }
        }
        .btn {
          margin-left: 20px;
        }
      }
    }
  }
  .address_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 136px;
    text-align: center;
    line-height: 136px;
    background-color: #fff;
    .btn {
      width: 690px;
      height: 90px;
      font-size: 36px;
      line-height: 90px;
      border-radius: 45px;
      background-color: #f7a427;
    }
  }
  .popup_box {
    width: 100%;
    height: 100%;
    .address_popup {
      .btn_box {
        padding-top: 50px;
        text-align: center;
        .btn {
          width: 690px;
          height: 90px;
          font-size: 36px;
          line-height: 90px;
          border-radius: 45px;
          background-color: #f7a427;
        }
      }
    }
  }
}
</style>

